<template>
  <div class="section_common">
    <div class="main">
      <el-form ref="form" label-width="100px">
        <!--<el-form-item label="所属仓库" required>
          <el-select
            v-model="form.region"
            size="mini"
            placeholder="请选择所属仓库"
          >
            <el-option label="上雪仓" value="shenzhen"></el-option>
            <el-option label="东莞仓" value="hefei"></el-option>
          </el-select>
        </el-form-item>-->

        <el-form-item label="所属仓库" required>
          <el-radio v-model="area" label="1">东莞仓</el-radio>
          <el-radio v-model="area" label="2">上雪仓</el-radio>
        </el-form-item>

        <!--<el-form-item label="特殊资源" required>
          <el-select
            v-model="form.region"
            size="mini"
            placeholder="请选择特殊资源"
          >
            <el-option label="仓库现场" value="shenzhen"></el-option>
            <el-option label="办公用品" value="hefei"></el-option>
            <el-option label="宿舍" value="hefei"></el-option>
          </el-select>
        </el-form-item>-->

        <el-form-item label="所属区域" required>
          <el-radio v-model="type" label="仓库现场">仓库现场</el-radio>
          <el-radio v-model="type" label="办公用品">办公用品</el-radio>
          <el-radio v-model="type" label="宿舍">宿舍</el-radio>
        </el-form-item>


        <el-form-item label="部门/房号" required>
          <el-input v-model="dept" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="维修物品名称" required>
          <el-input v-model="goods" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="故障原因" required>
          <el-input v-model="description" size="mini"></el-input>
        </el-form-item>
        <van-steps direction="vertical" :active="active" active-icon="checked" active-color="#38f">
          <!--<p style="font-size:16px;font-weight: 900;margin-bottom: -10px;">审批人</p>-->
          <van-step v-show="oneShow">
            <!--<p style="font-size:16px;font-weight: 900">组长</p>-->
            <van-image v-for="(item,index) in oneLd" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
              <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
            </van-image>
          </van-step>
          <van-step v-show="twoShow">
            <!--<p style="font-size:16px;font-weight: 900">主管</p>-->
            <van-image v-for="(item,index) in twoLd" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
              <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
            </van-image>
          </van-step>
          <van-step v-show="fourShow">

            <van-image v-for="(item,index) in fourLd" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
              <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
            </van-image>
          </van-step>
          <van-step v-show="threeShow">
            <p style="font-size:16px;font-weight: 900">抄送人</p>
            <!--<p style="font-size:16px;font-weight: 900">指定审批人</p>-->
            <van-image v-for="(item,index) in threeLd" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
              <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
            </van-image>
          </van-step>


        </van-steps>
        <el-form-item>
          <el-button type="primary" size="mini" @click="submitPost"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue';
  import { Image as VanImage ,Toast,Picker,Popup} from 'vant';
  Vue.use(Picker);
  Vue.use(Popup);
  Vue.use(VanImage);
export default {
  data() {
    return {
      area:"1",
      type:"仓库现场",
      dept:"",
      goods:"",
      description:"",

      nowUser:"",
      title: "物资维修申请",

      addMaintainApply: '/mobiles/addMaintainApply',

      active:"-1",//步骤索引,从0开始
      oneShow:false,//审批是否显示
      oneLd:[],
      twoShow:false,
      twoLd:[],
      threeShow:false,
      threeLd:[],
      fourShow:false,
      fourLd:[],

    };
  },
  created() {
    this.nowUser=JSON.parse(localStorage.getItem('userInfo')).userId;
    this.getLd();
  },
  methods: {

    getLd(){
      this.$https.post('/mobiles/getSpld',{
        nowUser:this.nowUser,
      }).then((res)=>{
        if (res.data.data.ld1.length>0){
          this.oneShow=true;
          this.oneLd=res.data.data.ld1;
        }
        if (res.data.data.ld2.length>0){
          this.twoShow=true;
          this.twoLd=res.data.data.ld2;
        }
        if (res.data.data.ld4.length>0){
          this.fourShow=true;
          this.fourLd=res.data.data.ld4;
        }
        if (res.data.data.ld3.length>0){
          this.threeShow=true;
          this.threeLd=res.data.data.ld3;
        }
      }).catch(err => {
        console.log(err);
      })
    },

    // 返回
    goBack() {
      this.$router.go(-1);
    },
    // 提交
    submitPost() {
      if (!this.isNull()) return false;

      this.$https.post(this.addMaintainApply, {
        nowUser:this.nowUser,
        area:this.area,
        type:this.type,
        dept:this.dept,
        goods:this.goods,
        description: this.description,

      }).then(res => {
        res;
        Toast("申请成功");
        this.$router.go(-1);
      }).catch(err => {
        console.log(err)
      });
    },
    //判断相关数据是否为空
    isNull() {
      if (this.checked1 == '') {
        this.$toast("请选择仓库");
        return false;
      }
      if (this.type=='') {
        this.$toast("请选择所属区域");
        return false;
      }
      if (this.dept=='') {
        this.$toast("部门/房号不能为空");
        return false;
      }
      if (this.goods=='') {
        this.$toast("维修物品名称不能为空");
        return false;
      }
      if (this.description=='') {
        this.$toast("故障原因不能为空");
        return false;
      }
      return true;
    },

  },
};
</script>

<style lang="scss" scoped>
.main {
  display: flex;
  justify-items: center;
  margin: 0 auto;
  .el-form {
    padding-right: 10px;
    .el-form-item {
      .el-form-item__label {
        line-height: 16px;
      }
      margin-bottom: 5px;
    }
  }
}
</style>